"use client"

import UploadAvatar from "@/components/UploadAvatar"
import { Avatar } from "@radix-ui/themes"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useCallback, useMemo } from "react"
import { join } from "path"
type MenuItemProps = React.PropsWithChildren<{
    className?: string
}>
const MenuItem = ({ className, children }: MenuItemProps) => {
    return (
        <div className={`transition text-center pl-2 pt-1 pb-1 ${className}`}>
            {children}
        </div>
    )
}
const HomeMenu = () => {
    const pathname = usePathname();
    const path = useMemo(() => join(pathname, "..").replaceAll("\\", "/"), [pathname])
    const menu = useMemo(() => {
        return [{
            name: "个人中心",
            href: "/"
        }, {
            name: "消息管理",
            href: "/notifications"
        }, {
            name: "我的班级",
            href: "/classes"
        }, {
            name: "文章管理",
            href: "/posts"
        }].map(({ name, href }) => ({
            name,
            href,
            className: !href ? "border-t mt-2 mb-2 text-base" : " " + (path === href ? "text-current" : "text-gray-500 hover:text-current")
        }))
    }, [path])
    const onUpload = useCallback((base64: string) => {

        return false;
    }, []);
    return (
        <div className="w-40">
            <MenuItem>
                <UploadAvatar
                    onUpload={onUpload}
                >
                    <Avatar
                        fallback={"A"}
                        size='6'
                    />
                </UploadAvatar>
                <div className="text-center whitespace-normal">
                    你待我如初见，我诺千里寻铭心
                </div>
            </MenuItem>
            {menu.map(({ name, href, className }, key) => {
                const menu = <MenuItem key={key} className={className} >{name}</MenuItem>
                if (!href) return menu
                return (
                    <Link key={key} href={`/home${href}`}>
                        {menu}
                    </Link>
                )
            })}
        </div>
    )
}
export default HomeMenu